::deep .resource-state-badge {
    padding: 0 3px;
    cursor: pointer;
}

::deep fluent-toolbar > h1 {
    padding-left: calc(var(--design-unit) * 1.5px);
}

::deep.content-layout-with-toolbar > fluent-toolbar {
    padding: var(--layout-toolbar-padding);
}

::deep .unread-logs-errors-link {
    vertical-align: middle;
    --unread-logs-badge-color: #ffffff;
}

::deep .unread-logs-errors-link::part(control) {
    margin-left: 5px;
    padding: 0;
    flex-grow: 0;
    color: #ffffff;
}

::deep .error-counter-badge {
    padding: 1px;
}

/* Forces the grid to always take up the width of its rows,
   and the rows to always take up the width of the cells.
   This fixes a few odd rendering things, but also enables us
   to set overflow-x: clip on the grid to prevent an odd visual
   glitch with the menu when it is at the far right of the viewport
*/
::deep fluent-data-grid,
::deep fluent-data-grid-row {
    min-width: min-content;
}

/* Ensures that any popups (e.g. menus) don't overflow past
   the right edge of the grid causing a visual flicker of
   the horizontal scrollbar appearing and disappearing
*/
::deep fluent-data-grid {
    overflow-x: clip;
}
